<template>
  <el-card>
    <div v-if="props.title" class="card-header">
      <h4>
        <strong>{{ props.title }}</strong>
      </h4>
    </div>
    <div class="card-body">
      <el-table v-loading="loading" :data="requirementList">
        <el-table-column label="序号" width="100" align="center" type="index">
          <template #default="scope">
            {{ computeIndex(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column
          label="优先级"
          width="100"
          align="center"
          prop="priority"
          sortable
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <y-dict-tag
              :options="sys_priority_level"
              :value="scope.row.priority"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="需求名称"
          width="300"
          align="center"
          prop="name"
          sortable
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <router-link
              :to="'/pms/requirement-info/index/' + scope.row.id"
              class="link-type"
            >
              <span>{{ scope.row.name }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          label="需求来源"
          width="100"
          align="center"
          prop="origin"
          :show-overflow-tooltip="true"
          sortable
        >
          <template #default="scope">
            <y-dict-tag :options="pms_req_origin" :value="scope.row.origin" />
          </template>
        </el-table-column>
        <el-table-column
          label="需求分类"
          align="center"
          prop="classify"
          :show-overflow-tooltip="true"
          sortable
        >
          <template #default="scope">
            <y-dict-tag
              :options="pms_req_classify"
              :value="scope.row.classify"
            />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" sortable>
          <template #default="scope">
            <y-dict-tag :options="pms_req_status" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>

      <!--列表分页-->
      <y-pagination
        class="card-pagination"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.limit"
        @pagination="getList"
      />
    </div>
  </el-card>
</template>

<script setup name="ReqCard">
import { listRequirement } from "@/api/pms/requirement";

const { proxy } = getCurrentInstance();
const { pms_req_status, sys_priority_level, pms_req_origin, pms_req_classify } =
  proxy.useDict(
    "pms_req_status",
    "sys_priority_level",
    "pms_req_origin",
    "pms_req_classify"
  );

const total = ref(0);
const loading = ref(false);
const requirementList = ref([]);

const props = defineProps({
  title: {
    type: String,
    default: "需求信息",
  },
  version: {
    type: String,
    default: undefined,
  },
  module: {
    type: String,
    default: undefined,
  },
  testplan: {
    type: String,
    default: undefined,
  },
});

// 初始化 queryParams
const queryParams = reactive({
  version: props.version,
  module: props.module,
  status: undefined,
  page: 1,
  limit: 10,
});

function computeIndex(index) {
  return index + (queryParams.page - 1) * queryParams.limit + 1;
}

/** 监控Props变化，并更新查询参数 */
watch(
  [() => props.module, () => props.version, () => props.testplan],
  (
    [newModule, newVersion, newTestPlan],
    [oldModule, oldVersion, oldTestPlan]
  ) => {
    if (
      newModule !== oldModule ||
      newVersion !== oldVersion ||
      newTestPlan !== oldTestPlan
    ) {
      queryParams.module = newModule;
      queryParams.version = newVersion;
      queryParams.testplan = newTestPlan;
      getList();
    }
  },
  { immediate: true }
);

/** 查询列表 */
async function getList() {
  loading.value = true;
  try {
    const response = await listRequirement(queryParams);
    requirementList.value = response.data;
    total.value = response.total;
  } catch (error) {
    console.error("Failed to fetch requirements:", error);
  } finally {
    loading.value = false;
  }
}

/** Expose方法 */
defineExpose({
  getList,
});
</script>
